import { TabBar } from 'antd-mobile';
import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import Home from './Home';
import Jxuan from './Jxuan';
import Glue from './Glue';
import My from './My';
class WZTabBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'homeTab',
      hidden: false,
      fullScreen: false,
    };
  }

  componentDidMount() {
    // 初始化
    // console.log('%c 🍾 TabBar', 'font-size:20px;background-color: #7F2B82;color:#fff;');
  }

  renderContent(pageText) {
    // console.log('%c 🍞 pageText: ', 'font-size:20px;background-color: #33A5FF;color:#fff;', pageText);
    return (
      <div
        style={{
          backgroundColor: 'white',
          height: '100%',
          textAlign: 'center',
        }}
      >
        <div>
          <Switch>
            <Route exact path='/'>
              <Home />
            </Route>
            <Route exact path='/jx'>
              <Jxuan />
            </Route>
            <Route exact path='/gl'>
              <Glue />
            </Route>
            <Route exact path='/my'>
              <My />
            </Route>
          </Switch>
        </div>
      </div>
    );
  }

  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor='#949494'
          tintColor='#33A3F4'
          barTintColor='white'
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title='主页'
            key='Home'
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  fontSize: '22px',
                }}
                className='iconfont wz-wangzhejingjileitai'
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  fontSize: '22px',
                }}
                className='iconfont wz-wangzhejingjileitai'
              />
            }
            selected={this.state.selectedTab === 'homeTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'homeTab',
              });
              // 不适合使用路由
              // this.props.history.push('/');
            }}
            data-seed='Home'
          >
              
            {/* 不适合使用路由{this.renderContent('Home')} */}
            <Home />
          </TabBar.Item>
          <TabBar.Item
            title='精选'
            key='Elite'
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  fontSize: '22px',
                }}
                className='iconfont wz-jingxuanzuanshi'
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  fontSize: '22px',
                }}
                className='iconfont wz-jingxuanzuanshi'
              />
            }
            selected={this.state.selectedTab === 'eliteTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'eliteTab',
              });
              // 不适合使用路由
              // this.props.history.push('/jx');
            }}
            data-seed='Elite'
          >
            {/*不适合使用路由 {this.renderContent('Elite')} */}
            <Jxuan />
          </TabBar.Item>
          <TabBar.Item
            title='攻略'
            key='Strategy'
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  fontSize: '22px',
                }}
                className='iconfont wz-gonglve'
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  fontSize: '22px',
                }}
                className='iconfont wz-gonglve'
              />
            }
            selected={this.state.selectedTab === 'strategyTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'strategyTab',
              });
              // 不适合使用路由
              // this.props.history.push({ pathname: '/gl' });
            }}
            data-seed='Strategy'
          >
            {/* 不适合使用路由{this.renderContent('Strategy')} */}
            <Glue />
          </TabBar.Item>
          <TabBar.Item
            title='我'
            key='My'
            icon={
              // 不适合使用路由
              // <NavLink
              //   to='/my'
              //   style={{
              //    color:'#949494'
              //   }}
              // >
                <div
                  style={{
                    width: '22px',
                    height: '22px',
                    fontSize: '22px',
                  }}
                  className='iconfont wz-wode'
                />
              //  </NavLink>
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  fontSize: '22px',
                }}
                className='iconfont wz-wode'
              />
            }
            selected={this.state.selectedTab === 'myTab'}
            badge={1}
            onPress={() => {
              this.setState({
                selectedTab: 'myTab',
              });
            }}
            data-seed='My'
          >
            <My />
            {/* 不适合使用路由{this.renderContent('My')} */}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

WZTabBar = withRouter(WZTabBar);
export default WZTabBar;
